<template>
  <div v-if="MD_modal">
    <Modal v-model="MD_modal" width="500">
      <p slot="header" style="text-align:center">
        <span>忘记密码</span>
      </p>
      <Form ref="signin" :model="formData" label-position="top" :rules="ruleValidate">
        <FormItem label="账户名称" prop="userName">
          <Input v-model="formData.userName" placeholder="请输入账户名称">

          </Input>
        </FormItem>
        <FormItem label="手机号码" prop="phone">
          <Input v-model="formData.phone" placeholder="请输入手机号码">

          </Input>
        </FormItem>
        <FormItem class="message" label="短信验证码" prop="smsCode">
          <Input v-model="formData.smsCode" placeholder="请输入短信验证码">

          <span class="message_1" slot="append">
            <Button class="yzm_button" :class="{ red: spinShow }" @click="getCode()">{{ codeNum }}</Button>
          </span>
          </Input>
        </FormItem>
        <FormItem label="用户密码" prop="password">
          <Input v-model="formData.password" type="password" password placeholder="请输入新的用户密码密码">
          </Input>
        </FormItem>
        <FormItem label="确认新密码" prop="repassword">
          <Input v-model="formData.repassword" type="password" password placeholder="请再次输入密码">
          </Input>
        </FormItem>

      </Form>
      <div slot="footer" class="footer">
        <Button type="text" @click="MD_modal = false">取消</Button>
        <Button type="primary" :loading="MD_buttonLoading" @click="MD_submitFun('signin')">确认</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { validatePhone } from "@/tool/myValidator";

export default {
  name: "xxx-xxx",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      MD_modal: false,
      MD_buttonLoading: false,
      formData: {},
      ruleValidate: {
        userName: [
          {
            required: true,
            message: "请输入账户名称",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入用户密码",
            trigger: "blur"
          }
        ],
        repassword: [
          {
            required: true,
            message: "请再次输入密码",
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            validator: validatePhone,
            trigger: "blur"
          }
        ],
        smsCode: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          }
        ]
      },
      spinShow: false,
      codeNum: "获取验证码"
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    MD_submitFun(name) {
      if (this.formData.password != this.formData.repassword) {
        this.$Message.error("!! 请输入两遍相同的密码");
        return;
      }
      this.MD_buttonLoading = true;
      this.$refs[name].validate((valid) => {
        console.log("校验", valid);
        if (valid) {
          let data = {
            ...this.formData,
            status: 2
          };
          this.httpPost(this.Api["forget_password"], data)
            .then((res) => {
              if (res && res.code == "00000") {
                this.MD_Modal = false;
                this.$Message.success("密码修改成功");
                this.MD_buttonLoading = false;
                this.MD_modal = false;
              }
              // this.$router.push("/login");
            })
            .catch((err) => {
              console.log("请求error", err);
              this.spinShow = false;
              this.MD_buttonLoading = false;
              console.error(err.message, "请求失败");
            });
        } else {
          this.MD_buttonLoading = false;
          this.$Message.error("!! 请输入必填信息");
        }
      });
    },
    MD_openFun() {
      this.MD_modal = true;
    },
    getCode() {
      let data = {};
      if (this.codeNum != "获取验证码") {
        this.$Message.error("!! 请不要重复点击按钮");
        return;
      }
      if (!this.formData.phone) {
        this.$Message.error("!! 请输入手机号");
        return;
      }
      this.codeFun();
      data = {
        phone: this.formData.phone,
        status: 1,
        type: 2
      };
      this.spinShow = true;
      this.httpGet(this.Api["sendsms"], data)
        .then((res) => {
          if (res && res.code == "00000") {
            //验证码倒计时
            this.codeFun();
            this.spinShow = false;
            this.$Message.success("短信发送成功");
          }
        })
        .catch((err) => {
          this.spinShow = false;
          console.error(err);
        });
    },
    // 验证码倒计时
    codeFun() {
      this.codeNum = 60;
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.codeNum--;
        if (this.codeNum <= 0) {
          this.codeNum = "获取验证码";
          clearInterval(this.timer);
        }
      }, 1000);
    }
  },
  update() {},
  destroyed() {}
};
</script>
<style lang="less" scoped>
@import "@/assets/styles/main.less";

.footer {
  .flex-x(center, center);
}
</style>